<template>
	<div class="menu">
		<div class="menu-box">
			<div class="menu-item" v-for="(item) in listData" :key="item['_id']" @click="navigateTo(item)">
				<uv-image :src="item['icon']" lazy-load height="100rpx" width="100rpx" mode="aspectFill"></uv-image>
				<text>{{item['name']}}</text>
			</div>
		</div>
	</div>
</template>

<script setup>
	import { ref, computed } from 'vue';
	import { useGeneralStore } from '@/store/general.js'

	const generalStore = useGeneralStore();

	const listData = computed(() => generalStore.menuList);

	function navigateTo(item) {
		uni.navigateTo({
			url: '/pages/sub/main/list/index?id=' + item['_id']
		})
	}
</script>

<style lang="scss" scoped>
	.menu {
		display: flex;
		padding: 0 $side-width;
		margin-top: $side-width;

		.menu-box {
			display: flex;
			flex-wrap: wrap;
			background: #fff;
			border-radius: 8px;
			padding: 10rpx 12rpx;
			width: 100%;
			box-sizing: border-box;

			.menu-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-self: center;
				width: 20%;
				padding: 12rpx 0;

				text {
					font-size: 24rpx;
					color: $uv-content-color;
					margin-top: 8rpx;
				}
			}
		}
	}
</style>